<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="addProperties">添加客户</el-button>
          </el-col>
          <el-col :span="14">
            <div style="display: flex">
              <el-select v-model="categoryId" placeholder="请选择" style="width:180px">
                <el-option
                  label="全部分类"
                  value=""
                />
                <el-option
                  v-for="category in categoriesList"
                  :key="category.id"
                  :label="category.title"
                  :value="category.id"
                />
              </el-select>
              <el-select v-model="agentId" placeholder="请选择" style="width:180px">
                <el-option
                  label="全部经纪"
                  value=""
                />
                <el-option
                  v-for="agent in agentsList"
                  :key="agent.id"
                  :label="agent.name"
                  :value="agent.id"
                />
              </el-select>
              <el-input v-model="input" placeholder="请输入标题">
                <!-- <el-select slot="prepend" v-model="agentId" placeholder="全部经纪人" style="width:150px">
                <el-option v-for="agent in agentsList" :key="agent.id" :label="agent.name" :value="agent.id" />
              </el-select> -->
                <el-button slot="append" icon="el-icon-search" @click="seek" />
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-table
            :data="propertiesList"
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              prop="image"
              label="封面"
              width="150"
            >
              <template v-slot="{row}">
                <img :src="row.image" alt="" style="width:100%">
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              width="120"
            />
            <el-table-column
              prop="tegs"
              label="标签"
              width="120"
            >
              <template v-slot="{row}">
                <el-tag v-for="(tag,index) in row.tags" :key="index" type="success">{{ tag }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="120"
            />
            <el-table-column
              prop="category.title"
              label="分类"
              width="100"
            />
            <el-table-column
              prop="agent.name"
              label="经纪"
              width="100"
            />
            <el-table-column
              prop="pric"
              label="价格"
              width="100"
            />
            <el-table-column
              prop="desc"
              label="介绍"
              min-width="100px"
            />
            <el-table-column
              label="图片"
              min-width="200px"
            >
              <template v-slot="{row}">
                <div style="margin:0 5px;overflow-x: hidden;height: 200px;">
                  <img v-for="(img,index) in row.photos" :key="index" :src="img" alt="" style="float:left; width:100px">
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="150"
            >
              <template #default="{row}">
                <el-button type="primary" size="small" @click="editProperties(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delProperties(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            :current-page.sync="page"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
    <HandleDialog ref="handleDialog" :is-show-dislog.sync="isShowDislog" :categories-list="categoriesList" :agents-list="agentsList" />
  </div>
</template>

<script>
import HandleDialog from './components/handleDialog.vue'
import { getPropertiesApi, delPropertiesApi, getPropertiesCounApi } from '@/api/property'
import { getCategoriesApi } from '@/api/category'
import { getAgents } from '@/api/agents'
export default {
  components: {
    HandleDialog
  },
  data() {
    return {
      isShowDislog: false,
      page: 1,
      pageSize: 2,
      total: 0,
      propertiesList: [], // 房产列表
      categoriesList: [], // 分类列表
      agentsList: [], // 经纪人列表
      categoryId: '',
      agentId: '',
      input: '',

      title: '',
      newAgent: '',
      newCategory: ''
    }
  },
  created() {
    this.getProperties()
    this.getCategories()
    this.getAgents()
    this.getPropertiesCoun()
  },
  methods: {
    // 编辑后刷新数据,新增后刷新数据
    editing() {
      this.getProperties(this.newAgent, this.newCategory)
      this.getPropertiesCoun(this.newAgent, this.newCategory)
    },
    // 每页条输改变触发
    handleSizeChange(val) {
      this.pageSize = val
      this.getProperties(this.newAgent, this.newCategory)
      this.getPropertiesCoun(this.newAgent, this.newCategory)
    },
    // 页面改变时触发
    handleCurrentChange(val) {
      console.log(val)
      this.page = val
      this.getProperties(this.newAgent, this.newCategory)
      this.getPropertiesCoun(this.newAgent, this.newCategory)
    },
    // 搜索
    seek() {
      this.title = this.input
      this.newAgent = this.agentId
      this.newCategory = this.categoryId
      // console.log(this.category)
      this.getProperties(this.newAgent, this.newCategory)
      this.getPropertiesCoun(this.newAgent, this.newCategory)
    },
    // 新增
    addProperties() {
      this.isShowDislog = true
    },
    // 编辑
    async editProperties(id) {
      await this.$refs.handleDialog.getProperty(id)
      this.isShowDislog = true
      this.$nextTick(() => {
        this.$refs.handleDialog.echoImage()
      })
    },
    // 删除
    async delProperties(id) {
      if (this.propertiesList.length === 1 && this.page > 1) {
        this.page--
      }
      await delPropertiesApi(id)
      this.$message.success('删除成功')
      this.getProperties(this.newAgent, this.newCategory)
      this.getPropertiesCoun(this.newAgent, this.newCategory)
    },
    // 获取房产数量
    async getPropertiesCoun(agent, category) {
      let obj = {}
      if (agent) {
        obj = { ...obj, agent }
      }
      if (category) {
        obj = { ...obj, category }
      }
      this.total = await getPropertiesCounApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize, title_contains: this.title, ...obj })
    },
    // 获取房产列表
    async getProperties(agent, category) {
      let obj = {}
      if (agent) {
        obj = { ...obj, agent }
      }
      if (category) {
        obj = { ...obj, category }
      }
      //  obj = { agent, category }
      this.propertiesList = await getPropertiesApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize, title_contains: this.title, ...obj })
      console.log(this.propertiesList)
    },
    // 获取分类列表
    async getCategories() {
      this.categoriesList = await getCategoriesApi({ _limit: 99 })
    },
    // 获取经纪人列表
    async getAgents() {
      this.agentsList = await getAgents({ _limit: 99 })
    }
  }
}
</script>

<style>

</style>
